<template>
  <view class="search-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-box">
        <uni-icons type="search" size="20" color="#666"/>
        <input 
          placeholder="输入搜索关键词"
          placeholder-class="placeholder-style"
          class="search-input"
          v-model="keyword"
          @confirm="search"
          focus
        />
      </view>
    </view>

    <!-- 搜索结果 -->
    <view class="result-list">
      <view v-if="results.length === 0" class="empty-tip">
        未找到相关结果
      </view>
      
      <view 
        v-for="post in results" 
        :key="post.id"
        class="result-item"
        @click="viewPostDetail(post.id)"
      >
        <!-- 复用index页面的列表项样式 -->
        <view class="post-header">
          <image :src="post.author.avatar" class="avatar" />
          <text class="author">{{ post.author.name }}</text>
          <text class="time">{{ post.createTime | formatTime }}</text>
        </view>
        <text class="content">{{ post.content }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      results: []
    }
  },
  onLoad(options) {
    if(options.keyword) {
      this.keyword = options.keyword
      this.search()
    }
  },
  methods: {
    search() {
      const keyword = this.keyword.toLowerCase()
      const allPosts = uni.getStorageSync('posts') || []
      
      this.results = allPosts.filter(post => 
        post.content.toLowerCase().includes(keyword) ||
        post.subject?.toLowerCase().includes(keyword)
      )
    },
    viewPostDetail(id) {
      uni.navigateTo({
        url: `/pages/post/detail?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  padding: 20rpx;
  
  .search-bar {
    background: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  }
  
  .result-list {
    margin-top: 40rpx;
    
    .empty-tip {
      text-align: center;
      color: #999;
      padding: 40rpx;
    }
    
    .result-item {
      background: #fff;
      padding: 30rpx;
      margin-bottom: 20rpx;
      border-radius: 12rpx;
      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
    }
  }
}
</style> 